<template>
	<view class="search">
		<view class="search-header">
			<view class="ss" style="background-color: #f7f7f7;padding: 4px 10px;width: 84%;border-radius: 30px;">
				<image src="../../static/images/icon/search.png" @click="handleSearch"></image>
							<input type="text" v-model="value" placeholder="请输入关键字搜索" confirm-type="search" @confirm="handleSearch" />
			</view>
			<text @click="handleQx">取消</text>
		</view>
		<view class="hot-Search">
			<view class="hot-header">
				热门搜索
			</view>
			<view class="hot-con" style="border-bottom: 1px solid #ddd;padding-bottom: 20px;">
				<view v-for="(item,index) in hotSearchList" :key="index" @click="handleClick(item.content)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="hot-Search" style="margin-top: 0px;">
			<view class="hot-header" style="display: flex;justify-content: space-between;">
				搜索历史 <image src="../../static/images/icon/clear-his.png" style="width:16px; height: 16px;" @click="handleDel"></image>
			</view>
			<view class="hot-con">
				<view v-for="(item,index) in searchHistory" :key="index" @click="handleClick(item)">
					{{item}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var http = require("../../utils/http");
	export default {
		data() {
			return {
				value: "",
				hotSearchList: [],
				searchHistory: [],
			}
		},
		onLoad() {
			http.request({
				url: "/search/hotSearchByShopId",
				method: "get",
				data: {
					number: 10,
					shopId: 1,
					sort: 1
				},
				callBack: res => {
					console.log(res);
					this.hotSearchList = res
				}
			})
			// 每次加载的时候将历史数据存储
			this.searchHistory = uni.getStorageSync('recentSearch') || []
		},
		onShow() {
			// 将本地存储的数据放到数组中
			this.searchHistory = uni.getStorageSync('recentSearch') ||[]
			this.value=""
		},
		methods: {
			// 点击搜索
			handleClick(val) {
				this.value = val
				uni.navigateTo({
					url: `/pages/search-prod-show/search-prod-show?prodName=${val}`
				})
				// 调用函数判断有没有重复项
				this.addSearchHistory(val);
			},
			// 取消
			handleQx() {
				console.log(1);
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 回车搜索
			handleSearch() {
				uni.navigateTo({
					url: `/pages/search-prod-show/search-prod-show?prodName=${this.value}`
				})
				// 调用函数判断有没有重复项
				this.addSearchHistory(this.value);
			},
			// 添加搜索历史
			addSearchHistory(keyword) {
				// 如果历史记录中已存在该关键词，则移除
				const index = this.searchHistory.indexOf(keyword);
				console.log(index);
				if (index !== -1) {
					this.searchHistory.splice(index, 1);
				}
				// 添加到数组头部
				this.searchHistory.unshift(keyword);
				// 存储到本地
				uni.setStorageSync('recentSearch', this.searchHistory);
			},
			handleDel(){
				uni.removeStorageSync('recentSearch');
				this.searchHistory=[]
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		height: 100vh;
		background: #fff;

		.search-header {
			padding: 18px 14px 10px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// height: 30px;
			// line-height: 30px;
			image {
				width: 16px;
				height: 16px;
				margin-right: 5px;
				vertical-align: middle;
			}

			input {
				display: inline-block;
				vertical-align: middle;
				font-size: 14px;
				width: 80%;
			}

			text {
				font-size: 13px;
				color: #f00;
			}
		}

		.hot-Search {
			padding: 10px;
			margin-top: 10px;
			color: #666;

			.hot-header {
				margin-bottom: 10px;
			}

			.hot-con {
				view {
					display: inline-block;
					padding: 4px 10px;
					background: #f2f2f2;
					margin-right: 10px;
					border-radius: 10px;
				}
			}
		}
	}
</style>